<template>
  <NavBarVue title="发布"/>
  <view class="center">
    <view class="tab">
      <view v-for="(item,index) in init_list" :key="index" :class="index==initIdx? 'active':''" @click="cut(index)">
        <view class="">
          {{ item.name }}
        </view>
        <view class="duan"></view>
      </view>
    </view>
    <GridFileVue :isShowCamera="isShowCamera" :showList="showList" :isShowDot="isShowDot"
                 :initIdx="initIdx"/>
  </view>
  <TabBarVue type="add"/>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  computed
} from "vue"
import GridFileVue from '@/components/GridFile.vue';
import {
  useCheckIfFileIsImageOrVideo
} from '@/utils/useCheckIfFileIsImageOrVideo'
import {
  safeAreaBottom
} from '@/utils/getMenuData'
import {onShow} from '@dcloudio/uni-app'

const isShowCamera = ref(true)
const isShowDot = ref(true)
const showList = ref([])
const init_list = reactive([{
  name: '全部',
}, {
  name: "视频",
}, {
  name: "照片"
}])
const initIdx = ref(0)
const fileList = ref([{
  url: 'https://cdn.uviewui.com/uview/album/2.jpg'
},
  {
    url: 'https://www.bilibili.com/video/av241607718/'
  }
])
onShow(() => {
  fileList.value = fileList.value.map((item) => ({
    ...item,
    type: useCheckIfFileIsImageOrVideo(item.url),
    flag: true,
  }))
  showList.value = fileList.value
})
//返回
const goBack = () => {
  uni.navigateBack()
}
const cut = (index) => {
  console.log(index, "｜ index");
  dynamicList.value.length = 0
  show.value = false
  initIdx.value = index
  fileList.value.forEach((item) => {
    item.flag = true
  })
  if (index == 2) {
    showList.value = fileList.value.filter((item) => {
      return item.type == "img"
    })
  }
  if (index == 1) {
    showList.value = fileList.value.filter((item) => {
      return item.type == "video"
    })
  }
  if (index == 0) {
    showList.value = fileList.value
  }
}
</script>

<style lang="scss" scoped>
.center {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 20rpx;

  .tab {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 30rpx;
    z-index: 100;

    .active {
      font-weight: bold;

      .duan {
        width: 30rpx;
        height: 10rpx;
        background-color: red;
        margin-left: 10rpx;
      }
    }
  }
}
</style>